<template>
    <view class="u-flex wrap" @click="path">
        <courseImage
            width="307"
            height="172"
            :image="data.cover_url"
            :courseType="data.course_type"
            :courseTypeText="data.course_type_text"
            :promotionType="data.promotion_type"
            :promotionTypeText="data.promotion_type_text"
        ></courseImage>
        <view class="u-flex u-row-between content">
            <view class="title u-line-2">{{ data.title }}</view>
            <view class="desc u-flex u-row-between">
                <view class="count">{{ data.sale_count }}人在学</view>
                <view
                    class="free"
                    v-if="$edu.test.isDef(data.is_buy) && data.is_buy == 1"
                    >已购买</view
                >
                <template v-else>
                    <view class="price" v-if="data.price > 0">{{
                        data.price | formatCurrency
                    }}</view>
                    <view class="free" v-else>免费</view>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
import courseImage from "@/components/common/courseImage.vue";
export default {
    components: { courseImage },
    props: {
        data: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            typeClass: { 1: "video", 2: "live", 3: "multipart", 4: "classes" },
            isIOS: "",
        };
    },
    mounted() {
        this.isIOS = this.$edu.test.getSystemInfo();
    },
    methods: {
        path() {
            this.$emit("path");
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    padding: 20rpx 0;
    .content {
        flex: 1;
        height: 172rpx;
        padding: 4rpx 0;
        flex-direction: column;
        margin-left: 24rpx;
        align-items: stretch;
        .title {
            font-size: 30rpx;
            font-weight: 500;
            color: $edu-main-color;
            line-height: 40rpx;
            letter-spacing: 1rpx;
        }
        .count {
            font-size: 24rpx;
            font-weight: 400;
            color: $edu-tips-color;
        }
        .price {
            font-size: 30rpx;
            font-weight: 500;
            color: $edu-price-color;
        }
        .free {
            font-size: 30rpx;
            font-weight: 500;
            color: $edu-free-color;
        }
    }
}
</style>
